<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <ul id="ul">
          <li>西施</li>
          <li>貂蝉</li>
          <li>昭君</li>
          <li>凤姐</li>
          <li>芙蓉姐姐</li>
        </ul>
        <input type="button" value="按钮" id="btn" />
</body>
<script>
    var i=0
    var int =document.querySelector('input')
    var ul=document.querySelector('#ul')
    int.addEventListener('click',function(){
        var li=document.createElement('li')
        var arr=['杨超越','甄姬','虞姬','杨贵妃']
        li.innerHTML=arr[i]
        ul.insertBefore(li, ul.children[0])
        i++
        if(i==3){
            i=0
        }
    })
    ul.addEventListener('click',function(e){
        for(var i =0;i<ul.children.length;i++){
            ul.children[i].style.backgroundColor=''
        }
        if (e.target.nodeName==='LI'){
            e.target.style.backgroundColor='red'
        }
    })
</script>
</html>